<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册页面</title>
    <style>
        .green { color: green; }
        .red { color: red; }
    </style>
    <script>
        function checkUsername() {
            var username = document.getElementById('username').value;
            var xhr = new XMLHttpRequest();
            xhr.open('GET', '/checkUsername?username=' + encodeURIComponent(username), true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var data = xhr.responseText;
                    if (data === 'true') {
                        document.getElementById('usernameMsg').textContent = '用户名可用';
                        document.getElementById('usernameMsg').className = 'green';
                    } else {
                        document.getElementById('usernameMsg').textContent = '用户名已被占用';
                        document.getElementById('usernameMsg').className = 'red';
                    }
                }
            };
            xhr.send();
        }

        function checkNickname() {
            var nickname = document.getElementById('nickname').value;
            var xhr = new XMLHttpRequest();
            xhr.open('GET', '/checkNickname?nickname=' + encodeURIComponent(nickname), true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var data = xhr.responseText;
                    if (data === 'true') {
                        document.getElementById('nicknameMsg').textContent = '昵称可用';
                        document.getElementById('nicknameMsg').className = 'green';
                    } else {
                        document.getElementById('nicknameMsg').textContent = '昵称已被占用';
                        document.getElementById('nicknameMsg').className = 'red';
                    }
                }
            };
            xhr.send();
        }

        function validateForm() {
            var username = document.getElementById('username').value;
            var nickname = document.getElementById('nickname').value;
            var password = document.getElementById('password').value;
            var confirmPassword = document.getElementById('confirmPassword').value;

            if (!username || !nickname || !password || !confirmPassword) {
                alert('所有字段都必须填写');
                return false;
            }

            if (password !== confirmPassword) {
                document.getElementById('confirmPasswordMsg').textContent = '两次输入的密码不一致';
                document.getElementById('confirmPasswordMsg').className = 'red';
                return false;
            }

            return true;
        }
    </script>
</head>
<body>
<h1>注册页面</h1>
<form  action="/register" method="post" onsubmit="return validateForm()" >
    <label for="username">账号:</label>
    <input type="text" id="username" name="username" required oninput="checkUsername()">
    <span id="usernameMsg"></span><br>

    <label for="nickname">昵称:</label>
    <input type="text" id="nickname" name="nickname" required oninput="checkNickname()">
    <span id="nicknameMsg"></span><br>

    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required>
    <span id="passwordMsg"></span><br>

    <label for="confirmPassword">确认密码:</label>
    <input type="password" id="confirmPassword" name="confirmPassword" required>
    <span id="confirmPasswordMsg"></span><br>

        <button type="submit">注册</button>
</form>
</body>
</html>
